import React, { Component } from 'react'
import { connect } from 'react-redux'
import Header from 'components/common/header'
import List from 'components/list'
import myStyle, {
    ContentWrapper,
    BoardImg,
    RecommendAuthor
} from './style'

class Home extends Component {
    render() {
        return (
            <div>
                <Header></Header>
                <ContentWrapper>
                    <div className="left">
                        <List></List>
                    </div>
                    <div className="right">
                        <div>
                            <BoardImg imgSrc={myStyle.img.banner1}></BoardImg>
                            <BoardImg imgSrc={myStyle.img.banner2}></BoardImg>
                            <BoardImg imgSrc={myStyle.img.banner3}></BoardImg>
                            <BoardImg imgSrc={myStyle.img.banner4}></BoardImg>
                        </div>
                        <RecommendAuthor>
                            <div className="title">
                                <span>作者推荐</span>
                                <a href="/">换一批</a>
                            </div>
                            <ul className="list">
                                <li>
                                    <div className="avatar"></div>
                                    <div className="main-content">
                                        <a href="/">乔汉童</a>
                                        <p>写了200.1k字 · 2k喜欢</p>
                                    </div>
                                    <a className="follow" href="/">关注</a>
                                </li>
                                <li>
                                    <div className="avatar"></div>
                                    <div className="main-content">
                                        <a href="/">梅拾璎</a>
                                        <p>写了262.4k字 · 30.7k喜欢</p>
                                    </div>
                                    <a href="/" className="follow">关注</a>
                                </li>
                            </ul>
                        </RecommendAuthor>
                    </div>
                </ContentWrapper>
            </div>
        )
    }
}

export default connect(null, null)(Home)